<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      margin: 0px;
    }
    #div{
      width: 500px;
      height: 400px;
      background:gray;
      display: flex;
      /*flex-direction: row;*/
      /*flex-wrap: wrap;*/
      /*flex-flow: row wrap;*/
      justify-content: center;
      /*align-items: baseline;*/
      /*align-content: flex-end;*/
    }
    .div{
      width: 100px;
      height: 100px;
      /*flex: 1;*/
      /*margin: 10px;*/
    }
    #d1{
      background: #008B8B;
      order: 4;
      flex-basis: 200px;
      /*flex-shrink: 2;*/
      /*font-size: 30px;*/
    }
    #d2{
      background: rebeccapurple;
      order: 3;
      /*flex-grow: 2;*/
      /*font-size: 10px;*/
    }
    #d3{
      background: orange;
      order: 2;
    }
    #d4{
      background: aqua;
      order: 1;
    }
    .span{
      width: 50px;
      height: 50px;
    }
    #s1{
      background: orange;
    }
    #s2{
      background: green;
    }
  </style>
</head>
<body>
<div id="div">
  <div id="d1" class="div">div1</div>
  <div id="d2" class="div">div2</div>
  <div id="d3" class="div">div3</div>
  <div id="d4" class="div">div4</div>
</div>


</div>

</body>
</html>